<script setup>
import {computed, ref, toRefs} from "vue";

//默认头像
import {useDefaultAvatarStore} from "@/stores/defaultAvatar.js";
import {timeUnits} from "element-plus";
import {formatTime} from "@/utils/formatTime.js";
const defaultAvatarStore = useDefaultAvatarStore();
const defaultPic = ref(defaultAvatarStore.defaultAvatar)

const props = defineProps({
  contactUsername: String,
  userPic: String,
  newContent: String,
  newMsgTime: String,
  noticeNum: Number,
})
const status = toRefs(props)
const contactUserName = ref(status.contactUsername);
const newContent = ref(status.newContent);
const userPic = ref(status.userPic);
const formatMsg = computed(()=>{
  return formatTime(status.newMsgTime.value)
})
const noticeNum = ref(status.noticeNum);

</script>

<template>
<div class="contacts-item">
  <img :src="userPic === null || userPic === '' ? defaultPic : userPic" alt="avatar" class="avatar">
  <div class="msg-info">
    <div class="name"><p>{{contactUserName}}</p></div>
    <div v-if="newContent!==null" class="content"><p style="white-space: pre-line">{{newContent}}</p></div>
  </div>
  <div style="display: flex;flex-direction: column;align-items:center;flex: 1">
    <div v-if="newMsgTime!==null" class="time"><p>{{formatMsg}}</p></div>
    <div v-if="noticeNum>0" class="noticeNum">
      <p>{{noticeNum}}</p>
    </div>
  </div>
</div>
</template>

<style scoped>
.contacts-item{
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
  user-select: none;
  &:hover{
    background-color: #f5f5f5;
  }
  .avatar{
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 4px;
    background-size: contain;
  }
  p{
    margin: 0 0 0 10px;
  }
  .msg-info{
    position: relative;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .name{
      flex: 1;
      p{
        font-size: 16px;
        margin-top: 4%;
      }
    }
    .content{
      flex: 1;
      p{
        margin-top: 1%;
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .time{
    p{
      font-size: 12px;
      color: #999999;
      margin-bottom: 25px;
    }
  }
  .noticeNum{
    p{
      color: #fff;
      background-color: #ff0000;
      border-radius: 50%;
      width: 19px;
      height: 19px;
      text-align: center;
      line-height: 19px;
      font-size: 10px;
      margin-top: -18px;
      margin-left: 16px;
    }
  }
}
</style>